<!-- 业务派单转派页面 -->
<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    modal
    class="pms-dialog"
    v-bind="$attrs"
    width="60%"
    v-on="$listeners"
  >
    <div class="container">
      <div ref="queryFormBoxTwo" class="search-flex-box">
        <el-form
          ref="validataForm"
          :model="formVal"
          label-width="260px"
          class="el-form pms-form"
          size="mini"
          :inline="true"
          style="line-height: 28px;"
        >
          <el-row :gutter="24">
            <el-col :span="9">
              <el-form-item label="姓名" style="width:100%;" prop="zanguMoney">
                <el-input v-model.trim="formVal.name" style="width:160px" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="账号" style="width:100%;" prop="zanguMoney">
                <el-input v-model.trim="formVal.loginName" style="width:160px" />
                <el-input v-model.trim="formVal.id" hidden />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="searchBtn">
          <el-button type="primary" class="pms-button-primary" @click="transferRecordAdd">查询</el-button>
        </div>
      </div>
      <div v-if="isShowAgent" class="select">
        <div class="box">
          <div class="title">可选办理人(内部人员)</div>
          <div class="content">
            <el-tree
              ref="userTree"
              class="userTree-container"
              empty-text=""
              :data="toSelectdata"
              default-expand-all
              icon-class=""
              @current-change="currentChange"
              @node-click="userClick"
            >
              <template slot-scope="{ node, data }">
                <span class="custom-tree-node">
                  <span v-if="!data.isLeaf" style="margin-right: 6px;font-size: 14px;color: #606266;" :class="[node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder']" />
                  <span v-else style="margin-right: 6px;font-size: 14px;color: #606266;" class="el-icon-user" />
                  <span style="font-size: 14px;color: #606266;">{{ data.text }}&nbsp;&nbsp;{{ data.loginName?`(${data.loginName})`: '' }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </div>
        <div class="box">
          <div class="title">可选办理人(服务商)</div>
          <div class="content">
            <el-tree
              ref="userTree"
              class="userTree-container"
              empty-text=""
              :data="toSelectdataTwo"
              default-expand-all
              icon-class=""
              @current-change="currentChange"
              @node-click="userClick"
            >
              <template slot-scope="{ node, data }">
                <span class="custom-tree-node">
                  <span v-if="!data.isLeaf" style="margin-right: 6px;font-size: 14px;color: #606266;" :class="[node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder']" />
                  <span v-else style="margin-right: 6px;font-size: 14px;color: #606266;" class="el-icon-user" />
                  <span style="font-size: 14px;color: #606266;">{{ data.text }}&nbsp;&nbsp;{{ data.loginName?`(${data.loginName})`: '' }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </div>
      </div>
      <div class="containerTwo">
        <div class="select">
          <div class="box">
            <div class="title">已选办理人</div>
            <div class="contentTwo">
              <div v-if="userSelectedName" class="user-select-item">
                <span class="el-icon-user" style="margin-right: 6px;" />
                <span>{{ userSelectedName }}&nbsp;&nbsp;{{ selectedUserId ? `(${selectedUserId})` : '' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="message">
        <el-form ref="nextPageForm" class="pms-details" :model="form" :rules="rules" label-width="100">
          <el-form-item label="办理意见" prop="opinion">
            <div style="display: flex; margin-right: 10px;">
              <el-button type="text" class="btnColor" @click="doOpenCommonOpinion">
                （自定义常用意见）
              </el-button>
              <el-select v-model="opinion" placeholder="请选择" class="pms-select" size="mini" style="margin-left: 10px" @change="handleSelectChange">
                <el-option
                  v-for="item in opinions"
                  :key="item.id"
                  :value="item.opinion"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-input v-model="form.opinion" class="pms-textarea" type="textarea" placeholder="请输入办理意见" :rows="4" maxlength="500" />
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button class="pms-button-primary" @click="confirm">确 定</el-button>
      <el-button class="pms-button-primary" @click="cancel">取 消</el-button>
    </div>

    <!--常用意见列表-->
    <common-opinion v-if="ifCommonOpinion" :visible.sync="ifCommonOpinion" @close="ifCommonOpinion = false" />
  </el-dialog>

</template>

  <script>
  import { getCommonOpinion } from '@/api/workFlow'
  import CommonOpinion from '@/components/nextPerson/commonOpinionList'
  import { getSendStaffTree, getServicerSendStaffTree } from '@/api/businessOperation/index' // 列表接口

  export default {
    name: 'SendordersReassignPage',
    components: { CommonOpinion },
    props: {
      title: {
        type: String,
        default: '项目转派'
      },
      // 办理意见是否必填
      opinionValid: {
        type: Boolean,
        default: true
      },
      // 是否展示下一步节点或办理人
      isShowAgent: {
          type: Boolean,
          default: true
      }
    },
    data() {
      return {
        detailId: '',
        nTemplateId: '',
        userSelected: {}, // 已选择的人员节点
        toSelectdata: [], // 可选办理人树型(内部人员)
        toSelectdataTwo: [], // 可选办理人树型(服务商)
        actDefIdSelected: '', // 已选择的节点id
        formVal: {}, // 派单人选择
        form: {
          opinion: '' // 办理意见
        },
        rules: {
          opinion: [
            { required: true, message: '请输入办理意见', trigger: 'change' }
            // { min: 10, message: '至少输入10个字', trigger: 'blur' }
          ]
        },
        finishNode: false,
        selectedUserId: '', // 已选办理人账号
        opinion: '',
        finish: false,
        opinions: [],
        ifCommonOpinion: false, // 常用意见页面
        userClickArr: []
      }
    },
    computed: {
      userSelectedName() {
        return this.userSelected.empName
      }
    },
    watch: {
      opinionValid: {
        handler: function(newVal) {
          if (!newVal){
            this.rules = {}
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.transferRecordAdd()
      this.getCommonOpinions()
    },
    methods: {
      transferRecordAdd() {
        const pramse = { name: this.formVal.name, loginName: this.formVal.loginName, id: this.formVal.id }
        // (内部人)
        getSendStaffTree(pramse).then(res => {
            if (+res.code !== 200) {
                  return Promise.reject(res)
        }
            this.toSelectdata = res.data
          console.log(this.toSelectdata, 'this.toSelectdata')
        })
        // (服务商)
        getServicerSendStaffTree(pramse).then(res => {
            if (+res.code !== 200) {
                  return Promise.reject(res)
        }
            this.toSelectdataTwo = res.data
        })
      },
      currentChange(data, node) {
        console.log("[]");
      },
      userClick(data, node) {
        if (data.isLeaf && node.expanded) {
          this.userClickArr = data
          const { id: empId, text: empName } = data
          this.userSelected = { empId, empName }
          this.selectedUserId = data.loginName
        }
      },
      // 提交后返回值
      doEmit() {
        const doNextEntityVal = {
          loginName: this.userClickArr.loginName,
          opinion: this.form.opinion,
          id: this.userClickArr.id,
          sendMode: 0,
          test: this.userClickArr.test
        }
        this.$emit('doNextEntity', doNextEntityVal)
        this.$emit('update:visible', false)
      },
      // 确认
      confirm() {
        if (this.isShowAgent && !this.finishNode && !Object.keys(this.userSelected).length) {
          this.$message({
            message: '请选择下一节点办理人',
            type: 'error'
          })
          return
        }
        this.opinionValid && this.$refs['nextPageForm'].validate((valid) => {
          // 校验通过
          valid && this.doEmit()
        })
        if (!this.opinionValid) {
          this.doEmit()
        }
      },
      // 取消
      cancel() {
        this.$refs['nextPageForm'].resetFields()
        this.$emit('selected', {})
        this.$emit('update:visible', false)
      },
      handleSelectChange(value) {
          this.$set(this.form, 'opinion', value)
      },
      // 获取常用意见
      getCommonOpinions() {
          getCommonOpinion().then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
              this.opinions = res.data
          })
      },
      // 打开常用意见页面
      doOpenCommonOpinion() {
          this.ifCommonOpinion = true
      }
    }
  }
  </script>
  <style lang='scss' scoped>
  ::v-deep .el-dialog__body {
      padding: 20px;
  }
    .container {
      .select {
        display: flex;
        align-items: center;
        .box {
          width: 100%;
          &:nth-child(n+2){
            margin-left: 10px;
          }
        }
        .title {
          width: 100%;
          height: 36px;
          line-height: 36px;
          text-align: left;
          font-size: 17px;
          font-weight: 900;
          // color: rgb(227, 47, 47);
          color: #eb4b4b;
        }
        .content {
          height: 250px;
          border: 1px solid #ccc;
          overflow: hidden;
          .node-item {
            height: 30px;
            line-height: 30px;
          //   text-align: left;
            text-indent: 1em;
            font-size: 12px;
            width: 100%;
            background-color: #DBDBDB;
            &:hover {
              cursor: pointer;
            }
            &.clicked {
              background-color: #ffefe5;
              color: #eb4b4b;
            }
          }
          .user-item {
            height: 22px;
            line-height: 22px;
          }
          .user-select-item {
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            width: 100%;
            background-color: #F4F6F8;
          }
        }
        .icon {
          margin-right: 6px;
          font-size: 14px;
        }
        ::v-deep .el-icon-caret-right:before {
          content: ''
        }
      }
      .message {
        //margin-top: 10px;
        text-align: left;
      }
      .nextTips{
        margin-top: 5px;
        text-align: left;
      }
    }
    .userTree-container{
      height: 250px;
      overflow-y: auto;
    }
    .nextPageTittle{
      text-align: left;
      line-height: 24px;
      font-size: 18px;
      color: #303133;
    }
  .el-button--text {
      // color: #02A7F0;
      color: #1b3f91;
      padding: 0;
      margin-bottom: 10px;
      line-height: 16px;
  }
  ::v-deep .el-form-item__error {
      line-height: 0;
      top: 120px;
      left: -60px;
  }

  .containerTwo {
      .select {
        .box {
          width: 100%;
          &:nth-child(n+2){
            margin-left: 10px;
          }
        }
        .title {
          width: 100%;
          height: 36px;
          line-height: 36px;
          text-align: left;
          font-size: 17px;
          font-weight: 900;
          // color: rgb(227, 47, 47);
          color: #eb4b4b;
        }
        .contentTwo {
          height: 30px;
          border: 1px solid #ccc;
          overflow: hidden;
          .node-item {
            height: 30px;
            line-height: 30px;
          //   text-align: left;
            text-indent: 1em;
            font-size: 12px;
            width: 100%;
            background-color: #DBDBDB;
            &:hover {
              cursor: pointer;
            }
            &.clicked {
              background-color: #ffefe5;
              color: #eb4b4b;
            }
          }
          .user-item {
            height: 22px;
            line-height: 22px;
          }
          .user-select-item {
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            width: 100%;
            background-color: #F4F6F8;
          }
        }
        .icon {
          margin-right: 6px;
          font-size: 14px;
        }
        ::v-deep .el-icon-caret-right:before {
          content: ''
        }
      }
      .message {
        //margin-top: 10px;
        text-align: left;
      }
      .nextTips{
        margin-top: 5px;
        text-align: left;
      }
    }

    .search-flex-box {
        display: flex;
        justify-content: space-between;
        height: auto;
    }
    .searchBtn {
        width: 100px;
        margin-left: auto;
        display: flex;
        margin-top: 0px;
        flex-direction: column;
        .el-button + .el-button {
            margin-left: 0;
            margin-top: 8px;
        }
    }
  </style>
